<template>
	<view @click.stop="handleToClick">
		<wCard marginTop="20">
			<view class="top-item-box">
				<image class="cover" :src="itemData.cover" mode="scaleToFill"></image>
				<view class="top-content">
					<text class="project-title">{{ itemData.name }}</text>
					<text class="project-desc">{{ itemData.remark }}</text>
					<view class="tag-list">
						<tagText />
						<tagText type="cyan" />
						<tagText type="orange" />
					</view>
				</view>
			</view>

			<view class="dividingLine" />

			<view class="bottom-box">
				<text class="strength-desc">{{ itemData.area }}/{{ itemData.project_stage }}/{{
					itemData.financing_amount
				}}</text>
				<image class="smallIcon" src="@/static/project/ic_start_us.png" mode="heightFix"></image>
				<text class="strength-size">{{ itemData.num_favorites }}</text>
				<image class="smallIcon" src="@/static/project/ic_eye.png" mode="heightFix"></image>
				<text class="strength-size">{{ itemData.num_read }}</text>
			</view>

		</wCard>
	</view>
</template>
<script setup>
import {
	navigateTo
} from '@/utils/util.js'

import wCard from './w-card.vue'
import tagText from './tagText.vue'
const props = defineProps({
	itemData: {
		type: Object,
		default: () => {
			return {}
		}
	},
	itemIndex: {
		type: [Object, Number],
		default: () => {
			return -1
		}
	}
})
const emits = defineEmits(['itemClickIndex', 'itemClick'])

const handleToClick = () => {
	console.log(props.itemData);
	navigateTo({
		url: `/pages/details/index?id=${props.itemData.code}`
	})
	emits('itemClick', props.itemData)
	emits('itemClickIndex', props.itemIndex)
}
</script>
<style lang="scss" scoped>
.top-item-box {
	display: flex;
	flex-direction: row;

	.cover {
		width: 186rpx;
		margin-left: 24rpx;
		margin-top: 27rpx;
		height: 190rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.top-content {
		flex: 1;
		margin-left: 24rpx;
		height: 190rpx;
		margin-top: 27rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.tag-list {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.project-title {
		font-size: 30rpx;
		color: #061612;

	}

	.project-desc {
		font-size: 26rpx;
		color: #737B79;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}

.dividingLine {
	width: 710rpx;
	height: 1rpx;
	margin-top: 24rpx;
	background: #EAE8E8;
	border-radius: 10rpx;
}

.bottom-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;

	.strength-desc {
		flex: 1;
		margin-left: 25rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		font-size: 24rpx;
		color: #8D8D8D;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.strength-size {
		margin-right: 22rpx;
		font-size: 24rpx;
		color: #8D8D8D;
	}

	.smallIcon {
		width: 24rpx;
		margin-right: 8rpx;
		height: 24rpx;
	}

}
</style>